/*--------------------------------------------------------------
# 通用
--------------------------------------------------------------*/

$color: #333;
$fontSize: 14px;
$fontSize16: 16px;
$width: 1200px;
$themeColor: #007bff;
$hoverColor: #007bff;
$bgColor: #f5f5f5;
$lightBlueBgColor:#eef3f6;
$rgbBgColor:rgba(0, 0, 0, 0.2);
$scollerRgbBgColor:rgba(0, 0, 0, 0.7);
$navHeight: 4.28rem;
$mh20: 1.42rem; // 20/14
$mh15: 1.07rem; // 15/14
$mh10: 0.71rem; // 10/14
$mh5: 0.36rem; // 5/14
$grayBorderColor:#ededed;
$blackBgBorder: rgba(80, 90, 92, 0.39);
$h1: 2rem;
$h2: 1.8rem;
$h3: 1.5rem;
$lh26: 1.85rem; // 26/14
$lh30: 2.42rem; // 30/14

html,
body {
  color: $color;
  font-size: $fontSize;
}

a {
  color: $color !important;
}

a:hover {
  color: $hoverColor !important;
  text-decoration: none !important;
}

img {
  vertical-align: middle;
  max-width: 100%;
}

.jsp-bg {
  background-color: $bgColor;
}

.jsp-layer {
  width: 100%;
  padding: 60px 0;
  background-color: $bgColor;
}

.jsp-layer:nth-child(odd) {
  background-color: white;
}


.jsp-container {
  width: $width;
  max-width: 100%;
  margin: 0 auto;
}

.jsp-container {
  .section-header {
    h2 {
      font-size: $h2;
      text-align: center;
      font-weight: 800;
      position: relative;
      padding-bottom: 30px;
      margin-bottom: 30px;

      &::before {
        content: '';
        position: absolute;
        display: block;
        width: 120px;
        height: 1px;
        background: #ddd;
        bottom: 1px;
        left: calc(50% - 60px);
      }

      &::after {
        content: '';
        position: absolute;
        display: block;
        width: 40px;
        height: 3px;
        background: $hoverColor;
        bottom: 0;
        left: calc(50% - 20px);
      }
    }
  }
}

/* 距离导航条距离 */
.jsp-navheight {
  margin-top: $navHeight !important;
}

/* 面包屑 */
.jsp-crumbs {
  margin: 0 auto;
  font-size: $fontSize16;
  padding: $mh15;

  .breadcrumb {
    background: none !important;
    padding: 0;
    margin-bottom: 0;

    i {
      color: $themeColor;
      margin-right: $mh15;
    }
  }

}

/* 内容区域（非首页） */
.jsp-content-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: $mh20;

  .left {
    flex: 7.5;
    background-color: white;

    .content {
      padding: $mh20;
      line-height: $lh26;

      .content-center {
        font-size: $fontSize16;

        h1 {
          font-size: #{32px/$fontSize}rem
        }

        h2 {
          font-size: #{24px/$fontSize}rem
        }

        h3 {
          font-size: #{18.72px/$fontSize}rem
        }

        h4 {
          font-size: #{16px/$fontSize}rem
        }

        h5 {
          font-size: #{13.28px/$fontSize}rem
        }

        h6 {
          font-size: #{12px/$fontSize}rem
        }

        strong {
          font-weight: bolder
        }

        ol,
        ul {
          list-style: auto;
          *margin-right: 0px;
          padding: 0 20px;
        }

        ol {
          list-style-type: decimal;
        }

        ul {
          list-style-type: disc;
        }

        blockquote {
          width: 100%;
          color: #8d8d8d;
          margin: $mh20;
          padding: $mh10 $mh20;
          clear: both;
          border-left: 5px solid #ddd;
        }

        em {
          font-style: italic
        }

        sub,
        sup {
          font-size: 75%;
        }

        .marker {
          background-color: Yellow;
        }

        big {
          font-size: larger;
        }

        small {
          font-size: smaller;
        }

        tt,
        code,
        kbd,
        samp {
          font-family: monospace;
        }

        var {
          font-style: italic;
        }

        del {
          text-decoration: line-through;
        }

        ins {
          text-decoration: underline;
        }

        cite {
          font-style: italic;
        }

        q {
          display: inline;
          quotes: auto;

          &::before {
            content: open-quote;
          }

          &::after {
            content: close-quote;
          }
        }

        address {
          display: block;
          font-style: italic;
        }

        pre {
          white-space: pre-wrap;
          word-wrap: break-word;
          -moz-tab-size: 4;
          tab-size: 4;
          display: block;
          font-family: monospace;
          margin: 1em 0px;
        }

      }

      h1.title {
        font-size: $h1;
        font-weight: 400;
        margin: $mh20;
        text-align: center;
        line-height: 2.5rem;
      }

      .source {
        display: flex;
        margin-bottom: $mh20;
        border-bottom: 1px solid $grayBorderColor;

        &>.datetime {
          margin-right: auto;
        }

        &>.from {}
      }

      .author {
        margin: $mh20 0 0 $mh20;
        text-align: right;
      }

      /* 图集轮播 */
      .detail-picture-carousel {
        margin-bottom: $mh20;

        .carousel-control-prev-icon {
          background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23007bff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
        }

        .carousel-control-next-icon {
          background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23007bff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
        }
      }
    }

    .prev-next-article {
      border-top: 1px solid $grayBorderColor;
      padding: $mh20 0 0 0;
      margin: 0 $mh20 $mh20 $mh20;

      a {
        font-size: 16px;
        line-height: 30px;
      }
    }
  }

  .left+.right {
    flex: 2.5;
    margin-left: $mh15;
    padding: $mh15;
    background-color: white;

    .block-title {
      font-size: 16px;
      line-height: 30px;
      position: relative;
      font-weight: 700;

      &::before,
      &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 2px;
        height: 0;
      }

      &::before {
        width: 100%;
        border-bottom: 1px solid $grayBorderColor;
      }

      &::after {
        width: 75px;
        border-bottom: 1px solid $themeColor;
      }
    }

    /* 相关文章、最新文章等场景通用 */
    .relation-block {

      ul {
        li {
          border-bottom: 1px solid $grayBorderColor;
          padding-bottom: $mh15;
          margin-bottom: $mh15;

          a {
            display: flex;
            justify-content: flex-start;

            img {
              width: 54px;
              margin-right: $mh15;
            }
          }
        }

        li:last-child {
          border-bottom: none;
        }
      }
    }
  }
}


/*底部悬浮工具条*/
#slide-tools {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  z-index: 2;

  a {
    width: 45px;
    height: 45px;
    z-index: 99;
    background: $themeColor;
    border-radius: 50%;
    text-align: center;

    i {
      color: #ffffff;
      font-size: 18px;
      line-height: 45px;
    }
  }

  #guestbook-tool {}

  #back-top {
    display: none;
  }
}

/* 滚动条 */
.jsp-scroller {
  &::-webkit-scrollbar {
    width: 18px;
    height: 18px;
    background-color: #f5f7fa;
  }

  &::-webkit-scrollbar-thumb {
    height: 6px;
    border: 4px solid transparent;
    background-clip: padding-box;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, .2);
  }

}

/*头部*/

#header {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  background-color: $rgbBgColor;
  z-index: 99;
  color: #fff;
  transition: all 500ms ease;

  &.scrollered {
    background-color: $scollerRgbBgColor !important;

    .dropdown-menu {
      background-color: $scollerRgbBgColor !important;
    }
  }

  // 导航条
  .navbar {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    height: $navHeight;

    .navbar-toggler {
      border: none;

      .navbar-toggler-icon {
        background-image: none;

        &::after {
          content: "\f0c9";
          font-family: "FontAwesome";
          font-size: 22px;
          color: white;
        }
      }
    }

    .navbar-brand {
      margin-left: 1rem;
      height: 100%;
      padding: 0;
      display: flex;
      align-items: center;
      font-size: 1.64rem !important;
      color: white !important;
      font-weight: 700;

      img {
        margin-right: 1rem;
        height: 2.14rem;
      }
    }

    //菜单项
    .navbar-collapse {
      .navbar-nav {
        height: 100%;

        &>.nav-item {
          line-height: $navHeight;

          &>.nav-link {
            padding: 0 1rem;
          }
        }

        .nav-item {
          padding: 0 1rem;

          &.active .nav-link {
            color: $hoverColor !important;
          }

          .nav-link {
            color: white !important;
            font-size: $fontSize16 !important;

            &:hover {
              color: $hoverColor !important;
            }
          }

          &:hover {
            .dropdown-menu {
              display: block;
            }
          }

          .dropdown {
            &>.dropdown-toggle:active {
              pointer-events: none;
            }
          }

          // 下拉菜单
          .dropdown-menu {
            background-color: $rgbBgColor;
            color: white;
            border-top: 0;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            padding: 0;

            a {
              color: white !important;
              line-height: 2rem;
              font-size: $fontSize16 !important;
              text-align: center;

              &:last-child {
                border-bottom-left-radius: .25rem;
                border-bottom-right-radius: .25rem;
              }

              &:hover {
                color: white !important;
                background-color: #007bff !important;
              }
            }
          }

        }
      }

    }
  }
}

/*卡片*/
.card-body {
  .card-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/*轮播项*/
.carousel {
  .carousel-item {
    text-align: center;
  }
}

/*--------------------------------------------------------------
# 首页
--------------------------------------------------------------*/

/* 轮播 */

#index-banner {
  .carousel-item {
    .carousel-caption.d-none {
      display: block !important;
    }
  }

}

/* 关于我们 */

.index-about {
  .about-info {
    h4 {
      text-align: center;
      font-weight: 700;
      font-size: 18px;
      padding-bottom: 0.5rem;
    }

    .shadow-sm {
      overflow: hidden;
    }

    img {
      transition: all 600ms ease;

      &:hover {
        transform: scale(1.1);
      }
    }

  }

}


/* 服务 */

.index-services {
  .services-info {
    .services-items {
      display: flex;
      display: -webkit-flex;
      margin-bottom: 20px;

      .icon {
        font-size: 40px;
        margin: 0 15px;
        min-width: 60px;

        i::before {
          color: $hoverColor;
        }
      }

      .description {
        h4 {
          font-size: 18px;
          font-weight: 600;
        }
      }

      &:hover a {
        color: $hoverColor !important;
      }

    }
  }
}



/* 客户案例 */

.index-cases {

  .cases-info {

    h4 {
      text-align: center;
      font-size: $fontSize16;
      padding: 0;
    }

    figure {
      background: #000;
      overflow: hidden;
      position: relative;
      margin: 0;

      .figure-img {
        margin: 0
      }

      &:hover img {
        opacity: 0.4;
        transition: 0.3s;
      }

      .link-preview,
      .link-details {
        position: absolute;
        display: inline-block;
        visibility: hidden;
        line-height: 1;
        text-align: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        transition: 0.2s;
        font-size: 22px;
        color: #fff;

        i {
          color: white
        }
      }

      .link-preview {
        left: calc(50% - 38px);
        top: calc(50% - 18px);
      }

      .link-details {
        right: calc(50% - 38px);
        top: calc(50% - 18px);
      }

      &:hover {

        .link-preview,
        .link-details {
          visibility: visible;
        }
      }

    }

  }

}

/* 新闻 */
.index-news {
  .text-news-list {
    li:last-child {
      border-bottom: none;
    }

    li {
      border-bottom: 1px solid #e9e9e9;
      display: flex;
      justify-content: flex-start;

      &:hover {
        background-color: $lightBlueBgColor;
      }

      .text-news-list-left {
        padding: $mh15;
        white-space: nowrap;
        display: flex;
        justify-content: center;
        flex-direction: column;
      }

      .text-news-list-left span {
        display: block;
        font-size: 1.78rem;
        text-align: center;
      }

      .text-news-list-right {
        padding: $mh15;

        h4 {
          font-size: $fontSize16;
          line-height: 30px;
          font-weight: 700;

          a span {
            color: red;
            margin-right: 5px;
          }

        }

      }
    }
  }

}

/* 友情链接  */
.index-links {
  .links-info {
    padding: 0 15px;

    ul {
      li {
        margin-bottom: 1px;
        padding: 15px 0;
        text-align: center;
        display: flex;
        display: -webkit-flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        font-weight: 200;

        a img {
          opacity: 0.8;
          transition: 0.3s;

          &:hover {
            opacity: 1;
          }
        }
      }
    }

  }
}


/* 底部 */
.footer {
  background-color: #242528 !important;
  color: rgba(255, 255, 255, 0.3);

  a {
    color: rgba(255, 255, 255, 0.3) !important;
  }

  .logo-contact {
    display: flex;

    ul {
      li {
        padding: 0 20px;
        white-space: normal;
        word-break: break-all;
        word-wrap: break-word;
      }
    }
  }

  .copyright {
    text-align: center;
    border-top: 1px solid $blackBgBorder;
    padding-top: 20px;
    margin-top: 40px;

    .copyright-content {
      // float: left;
    }

    .privacy {
      float: right;
    }
  }


  .bottom-nav {}

  .qrcode {
    display: flex;
    justify-content: right;

    .card {
      width: 125px;
      background: none;
      margin-left: 15px;

      .card-body {
        text-align: center;
        padding: 0;
        line-height: 28px;
        .card-text {
          font-size: 12px
        }
      }
    }
  }
}

/*--------------------------------------------------------------
# 文章模块
--------------------------------------------------------------*/
.info-news {

  /* 标题+描述 */
  .title-desc-list {
    padding: $mh15;

    .row {
      margin-left: 0 !important;

      .news-col {
        padding: 0 $mh15 $mh15 0;

        a {
          display: flex;
          height: 100%;
          border: 1px solid $grayBorderColor;

          &:hover {
            color: $color !important;

            .time {
              background-color: $hoverColor;
              color: white;
            }

            background-color: $bgColor;

          }

          .time {
            padding: $mh15;
            text-align: center;
            background-color: $bgColor;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .day {
              font-size: 2.14rem;
            }

            .date {
              white-space: nowrap;
            }
          }

          .title-desc {
            padding: $mh15;

            h4 {
              font-weight: bold;
              font-size: $fontSize16;
            }
          }
        }


      }
    }
  }

  /* 图片+标题+描述 */
  .picture-title-desc-list {
    padding: $mh15;

    .row {
      margin-left: 0 !important;

      .news-col {
        padding: 0 $mh15 $mh15 0;

        a {
          display: flex;
          height: 100%;
          border: 1px solid $grayBorderColor;

          &:hover {
            color: $color !important;
            background-color: $bgColor;
          }

          .image {
            padding: $mh15;
            text-align: center;
            flex: 3;
            display: flex;
            align-items: center;
          }

          .title-desc {
            padding: $mh15;
            flex: 7;
            border-left: 1px solid $grayBorderColor;

            h4 {
              font-weight: bold;
              font-size: $fontSize16;
            }
          }
        }


      }
    }
  }

}


/*--------------------------------------------------------------
# 图集模块
--------------------------------------------------------------*/
.info-picture {
  .picture-title-list {
    padding: $mh15;

    .category-filter {
      padding: 0;
      margin: $mh5 0 $mh20 0;
      text-align: center;

      li {
        cursor: pointer;
        margin: $mh5 $mh5 $mh5 0;
        display: inline-block;
        padding: 10px 20px;
        border-radius: 4px;
        background: white;
        margin-bottom: 5px;
        background-color: $grayBorderColor;

        &:hover {
          background-color: $themeColor;

          a {
            color: white !important;
          }
        }

        &.active {
          background-color: $themeColor;

          a {
            color: white !important;
          }
        }
      }
    }

    .row {
      h4 {
        text-align: center;
        font-size: $fontSize16;
        padding: 0;
      }

      figure {
        background: #000;
        overflow: hidden;
        position: relative;
        margin: 0;

        .figure-img {
          margin: 0
        }

        &:hover img {
          opacity: 0.4;
          transition: 0.3s;
        }

        .link-preview,
        .link-details {
          position: absolute;
          display: inline-block;
          visibility: hidden;
          line-height: 1;
          text-align: center;
          width: 36px;
          height: 36px;
          border-radius: 50%;
          transition: 0.2s;
          font-size: 1.57rem;
          color: #fff;

          i {
            color: white
          }
        }

        .link-preview {
          left: calc(50% - 38px);
          top: calc(50% - 18px);
        }

        .link-details {
          right: calc(50% - 38px);
          top: calc(50% - 18px);
        }

        &:hover {

          .link-preview,
          .link-details {
            visibility: visible;
          }
        }

      }
    }

  }
}

/*--------------------------------------------------------------
# 单页
--------------------------------------------------------------*/
.info-page {
  .right {
    background-color: $lightBlueBgColor !important;

    li {
      padding: $mh5;

      &.active a,
      a:hover {
        background-color: white;
      }

      a {
        font-size: $fontSize16;
        -webkit-transition: all 500ms ease;
        transition: all 500ms ease;
        display: block;
        background: none;
        padding: 5px 15px;
        border-radius: 5px;
      }

    }
  }
}

/*--------------------------------------------------------------
# 留言板
--------------------------------------------------------------*/
.guestbook {
  .vcode {
    height: calc(1.5em + .75rem + 2px);
  }
}


/*--------------------------------------------------------------
# errors
--------------------------------------------------------------*/
.errors404 {
  height: 100%;
  width: 100%;

  .tips {
    h3 {
      font-size: $h3;
      font-weight: 700;
    }

    a {
      color: white !important;
    }
  }
}



/*--------------------------------------------------------------
# site-maintenance
--------------------------------------------------------------*/
.site-maintenance {
  height: 100%;
  width: 100%;

  .tips {
    h3 {
      font-size: $h3;
      font-weight: 700;
    }

    a {
      color: white !important;
    }
  }

}


/*--------------------------------------------------------------
# @media
--------------------------------------------------------------*/

@media (min-width: 1200px) {

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: $width !important;
  }
}


@media(max-width: 1136px) {
  .index-news {
    .text-news-list {
      li {
        .text-news-list-left {
          span {
            font-size: 1.5rem;
          }
        }

        .text-news-list-right {
          p {
            display: none;
          }
        }
      }
    }
  }
}


@media(max-width: 1024px) {
  .index-news .text-news-list li .text-news-list-left span {
    font-size: 1.14rem;
    font-weight: bold;
  }
}

@media (max-width: 992px) {
  .jsp-content-section {
    flex-direction: column;

    .left+.right {
      margin: $mh15 0 0 0;
    }
  }

  .navbar-expand-lg .navbar-collapse {
    background-color: $rgbBgColor;
  }

  .scrollered {
    .navbar-expand-lg .navbar-collapse {
      background-color: $scollerRgbBgColor;
    }
  }
}


@media(max-width: 960px) {
  .index-news .text-news-list li .text-news-list-left span {
    font-size: 0.93rem;
    font-weight: bold;
  }
}


@media (max-width: 854px) {
  .index-news .text-news-list li .text-news-list-left {
    display: none;
  }

  .index-news .text-news-list li .text-news-list-right h4 {
    line-height: 31px;
  }
}

@media (max-width: 800px) {
  .index-news .text-news-list li .text-news-list-right h4 {
    line-height: 27px;
  }
}


@media (max-width: 768px) {

  .index-services {
    .services-info {
      >.services-items:last-child {
        margin-bottom: 0;
      }
    }
  }

  .index-news .text-news-list li .text-news-list-right h4 {
    line-height: 25px;
  }

  .info-news {
    .title-desc-list {
      .row {
        flex-direction: column;
        margin-right: 0;
        margin-left: 0;

        .news-col {
          padding-right: 0
        }
      }
    }

    .picture-title-desc-list {
      .row {
        flex-direction: column;
        margin-right: 0;
        margin-left: 0;

        .news-col {
          padding-right: 0
        }
      }
    }
  }
}


@media(max-width: 767px) {
  .index-news .text-news-list li .text-news-list-left {
    display: flex;

    span {
      font-size: 1.78rem;
    }
  }

  .index-news .text-news-list li .text-news-list-right {
    h4 {
      font-size: $fontSize16;
      line-height: 30px;
    }

    p {
      display: block;
    }

  }
}

@media(max-width: 640px) {}

@media(min-width: 640px) {}

@media(max-width: 480px) {

  .jsp-banner-section .carousel-img   {
    min-height: 150px;
    object-fit: cover;
  }

  .index-news {
    #index-news-carousel {
      margin-bottom: 20px;
    }
  }

  .footer {
    .logo-contact {
      margin-bottom: 20px;
    }

    .qrcode {
      justify-content: center;
      padding: 15px 0;
      border-top: 1px solid rgba(80, 90, 92, 0.39);
      margin: 0 15px;
    }

    .copyright {
      margin-top: 0;
    }
  }
}

@media(min-width: 480px) {
}

@media(min-width: 320px) {}